import { Carousel } from 'components/Carousel';
import { StoryContainer } from '../../../.storybook/StoryContainer';

export default {
  title: 'Carousel',
};

const placeholderImg =
  '';

export const Images = () => (
  <StoryContainer>
    <Carousel
      style={{ maxWidth: 800, width: '100%' }}
      placeholder={{ src: placeholderImg }}
      images={[
        {
          src: { src: 'https://source.unsplash.com/ANJHXftvvJ8/1280x720', width: 1280 },
          alt: 'A neon sign with kanji',
        },
        {
          src: { src: 'https://source.unsplash.com/qEWEz-U5p8Q/1280x720', width: 1280 },
          alt: 'Tokyo at night',
        },
        {
          src: { src: 'https://source.unsplash.com/lx9RWIg1Rdg/1280x720', width: 1280 },
          alt: 'A rad cyberpunk dude',
        },
      ]}
      width={1920}
      height={1080}
    />
  </StoryContainer>
);
